<template>
  <div class="container">
    <split-pane v-on:resize="resize" :min-percent='0' :default-percent='10' split="vertical" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
      <template slot="paneL">
        <mytree></mytree>
      </template>
      <template slot="paneR">
        <flow-chart :flowChart="flowChart"></flow-chart>
      </template>
    </split-pane>
    <!--<flow-chart :flowChart="flowChart"></flow-chart>-->
  </div>
</template>

<script>
  import flowChart from "./canvas";
  import splitPane from 'vue-splitpane'
  import mytree from '../components/tree'
  export default {
    components:{
      flowChart,
      splitPane,
        mytree
    },
    data() {
      return {
        flowChart:{}
      }
    },
    created(){

      let model = localStorage.getItem('model');
      if(model) this.flowChart = go.Model.fromJson(JSON.parse(model));

    },
    mounted(){

    },
    methods: {
        resize(e) {   //设置屏幕分割左侧最大40%

        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


</style>
